<template>
    <view class="login">
        <view class="login-bg">
            <image
                class="login-bg_img"
                src="/static/images/login_bg.png"
                mode="aspectFill"
            />
        </view>
        <view class="login-content">
            <view class="login-close" @click="goBack">
                <text class="icon icon-close"></text>
            </view>
            <view class="login-title">{{ $t('mine.login_forget_pwd') }}</view>
            <view class="login-form">
                <u-form class="login-form_content" :model="form" ref="form" :error-type="['toast']">
                                        <view class="login-form_tips">{{$t('mine.login_forget_tips')}}</view>
                    <u-form-item class="login-form_item" prop="email" left-icon="email" :left-icon-style="iconStyle">
                        <u-input v-model="form.email" :placeholder="$t('mine.input_email')"/>
                    </u-form-item>
                    <u-form-item class="password-form_item" prop="code" left-icon="lock" :left-icon-style="iconStyle">
                        <u-verification-code :seconds="seconds" @end="end" @start="start" :start-text="startText" :end-text="endText" :change-text="changeText"
						ref="uCode" @change="codeChange"></u-verification-code>
                        <u-button type="primary" @tap="getCode" slot="right" size="mini" :disabled="buttonDisable">
                            {{tips}}
                        </u-button>
                        <u-input v-model="form.code" type="number" :placeholder="$t('mine.input_verify_code')"/>
                    </u-form-item>
                </u-form>
                <view class="login-button">
                    <u-button type="primary" @click="submit">{{ $t('mine.next_step') }}</u-button>
                </view>
            </view>
        </view>

        <u-modal v-model="showTips" :show-title="false" :show-confirm-button="false" border-radius="32">
            <view class="tips-modal">
                <view class="tips-modal_text">{{ $t('mine.login_forget_tips') }}</view>
                <view class="tips-modal_btn">
                    <u-button type="primary" shape="circle" @click="showTips = false">{{ $t('mine.btn_confirm') }}</u-button>
                </view>
            </view>
        </u-modal>
    </view>
</template>

<script>
import pageMixin from '@/utils/pageMixin';
export default {
  mixins: [pageMixin],
    data() {
        return {
            form: {
                email: '',
                code: ''
            },
            loginId: '',
            iconStyle: {
                fontSize: '38rpx',
                color: '#646466',
                display: 'flex'
            },
            buttonDisable: false,
            rules: {
                email: [
                    {
                        required: true,
                        message: this.$t('mine.msg_email'),
                        type: 'email'
                    }
                ]
            },
            tips: '',
            seconds: 60,
			startText: this.$t('mine.get_verify_code'),
			endText: this.$t('mine.regain_verify_code'),
			changeText: "x" + " " + this.$t('mine.second'),
            showTips: false
        }
    },

    onLoad(options) {
    },
    onShow() {
    },
    onReady() {
        this.$refs.form.setRules(this.rules);
    },
    components: {},
    computed: {
        i18n() {
            return this.$t('mine')
        }
    },
    methods: {
        getCode() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$http.post('/client/user/account/email/check/exist',{email: this.form.email}).then(res => {
                        if (res.code == 200){
                            this.loginId = res.data;
                            if (this.$refs.uCode.canGetCode) {
                                this.$http.get('/client/user/account/email/code', {email: this.form.email}).then(res => {
                                    setTimeout(() => {
                                        this.$u.toast(this.$t('mine.send_success'));
                                        // 通知验证码组件内部开始倒计时
                                        this.$refs.uCode.start();
                                    }, 1000);
                                });
                            } else {
                                this.$u.toast(this.$t('mine.regain_afte'));
                            }
                        }
                    });
                } else {
                    console.log('验证失败');
                }
            });
        },
        end() {
            this.buttonDisable = false;
        },
        start() {
            this.buttonDisable = true;
        },
        codeChange(text) {
            this.tips = text;
        },
        goBack() {
            let pages = getCurrentPages();
            if (pages.length > 1) {
                this.$u.route({
                    type: 'back',
                    delta: 1
                })
            } else {
                this.$u.route({
                    type: 'tab',
                    url: '/pages/home/index'
                })
            }
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.form.code == undefined || this.form.code == '') {
                        uni.showToast({
                            title: this.$t('mine.input_verify_code'),
                            icon: 'none'
                        });
                        return;
                    }
                    let data = {
                        email: this.loginId,
                        code: this.form.code,
                        email_verify: 2,
                    };
                    this.$http.post('/client/user/account/email/verify',data).then(res => {
                       if (res == "success"){
                           this.$u.route('/pages/mine/setting/password/reset',{
                               loginId: this.loginId
                           });
                       }else{
                           this.$u.toast(this.$t('mine.verify_failed'));
                       }
                    });
                } else {
                    console.log('验证失败');
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.login {
    position: relative;
    height: 100vh;
}

.login-bg {
    width: 100%;
    height: 100%;
    position: absolute;

    .login-bg_img {
        width: 100%;
        height: 100%;
    }
}

.login-content {
    position: relative;
    padding-top: calc(43rpx + var(--status-bar-height));
}

.login-close {
    width: 42rpx;
    height: 42rpx;
    margin-left: 53rpx;
    margin-bottom: 130rpx;

    .icon {
        font-size: 42rpx;
        color: #ffffff;
    }
}

.login-title {
    font-size: 48rpx;
    font-family: 'Source Han Sans CN';
    font-weight: bold;
    color: #ffffff;
    padding: 048rpx;
    margin-bottom: 100rpx;
}

.login-form {
    width: 670rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    margin: 0 auto;
    padding: 38rpx;

    &_content {
        padding: 24rpx 0;
    }

    &_tips {
        background-color: rgba($color: $u-type-primary, $alpha: .1);
        padding: 24rpx 20rpx;
        border-radius: 10rpx;
        font-size: 24rpx;
        color: #484848;
    }

    &_item {
        margin-bottom: 30rpx;

        &--checkbox {
            padding: 0;
        }
    }
}

.login-button {
    margin-bottom: 50rpx;
}

.login-tips {
    font-size: 28rpx;

    &_left {
        color: #999999;

        &--text {
            color: $u-type-primary;
            text-decoration: underline;
        }
    }
}

.checkbox-item {
    line-height: 1;
    color: #999999;

    &_agreement {
        color: $u-type-primary;
        text-decoration: underline;
    }
}

.tips-modal {
    padding: 100rpx 48rpx 45rpx;

    &_text {
        margin-bottom: 82rpx;
        color: #323233;
        font-size: 28rpx;
    }
}
</style>
